<template>
  <div class="online-box">
    <div class="search-nav-box">
      <div class="item-search">
        <span>充值时间段</span>
        <el-date-picker
          v-model="company.begintime"
          type="date"
          placeholder="请选择"
          value-format="yyyy-MM-dd"
          style="width:140px"
        ></el-date-picker>
        <span class="separator">~</span>
        <el-date-picker
          v-model="company.endtime"
          type="date"
          placeholder="请选择"
          value-format="yyyy-MM-dd"
          style="width:140px"
        ></el-date-picker>
      </div>
      <div class="item-search">
        <span>公司名称</span>
        <el-input v-model="company.name" placeholder="请输入公司名称" clearable></el-input>
      </div>
      <div class="item-search">
        <span>地区</span>
        <cityCascader :citys="company.citys" :level="level" @handleChange="handleCityChange"></cityCascader>
        <!-- <el-cascader v-model="company.region" :options="addressOptions" placeholder="请选择"></el-cascader> -->
        <!-- <el-cascader
          popper-class="regions"
          :options="addressOptions"
          v-model="company.regions"
          :show-all-levels="false"
          :clearable="true"
          @change="changeCity()"
        ></el-cascader>-->
      </div>
      <div class="item-botton" @click="SearchInfo()">查询</div>
    </div>
    <ul class="moneyTypes">
      <li v-for="(item,index) in moneyTypes" :key="index">
        <span>{{item.title}}：</span>
        <span>{{item.total}}</span>
      </li>
    </ul>
    <div class="table-box">
      <el-table
        :data="OnLinePlayCash"
        stripe
        border
        style="width: 100%"
        class="online-table"
        v-loading="loading"
      >
        <el-table-column prop="ordernum" label="流水单号" align="center" width="250px"></el-table-column>
        <el-table-column label="企业名称" align="center" width="200px">
          <template slot-scope="scope">
            <div
              class="item-name item-name-companyname"
              @click="showCompanyInfo(scope.row)"
            >{{scope.row.companyname}}</div>
          </template>
        </el-table-column>
        <el-table-column label="地区" align="center">
          <template slot-scope="scope">
            <div class="item-cash">{{scope.row.area}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="充值人名称" align="center"></el-table-column>
        <el-table-column prop="telnum" label="充值人手机" align="center"></el-table-column>
        <el-table-column label="充值金额" align="center">
          <template slot-scope="scope">
            <div class="item-cash">{{scope.row.totalfee}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="rechargdate" label="充值时间" align="center"></el-table-column>
        <el-table-column label="充值类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.paytype==='WXAPP'">微信app</span>
            <span v-else-if="scope.row.paytype==='ZFBAPP'">支付宝app</span>
            <span v-else-if="scope.row.paytype==='WXH5'">PC端微信</span>
            <span v-else-if="scope.row.paytype==='ZFBH5'">PC端支付宝</span>
            <span v-else-if="scope.row.paytype==='ZYZH'">企业账号</span>
            <span v-else-if="scope.row.paytype==='JF'">积分</span>
            <span v-else-if="scope.row.paytype==='APAPP'">苹果支付App</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination @current-change="OnlineCurrentChange" :total="Online.total" :current-page="Online.pageNum" :page-size="Online.pageSize" layout="total, prev, pager, next, jumper" background>
      </el-pagination>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="OnlineCurrentChange"
        :current-page="Online.pageNum"
        :page-sizes="[10,20, 30, 50,100]"
        :page-size="Online.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Online.total"
        background
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="checkFlag" width="1040px" class="jhdialog">
      <check
        v-show="checkFlag"
        :companyName="companyname"
        :companyId="companyid"
        :type="'0'"
        :tabNum="'4'"
      ></check>
    </el-dialog>
  </div>
</template>
<style scoped src="./online.css">
</style>
<script src="./online.js">
</script>
